<div class="dialog relative">
  <app-btn
    class="absolute right-0 top-[-66px] dialog-colse-outside-btn"
    [content]="{ icon: { svg: 'close' }, mode: 'icon', color: 'primary' }"
    mat-dialog-close="true"
  />
  @if (data.title) {
    <h2 mat-dialog-title>
      <span [class]="data.titleClasses">{{ data.title }}</span>
    </h2>
  }
  <mat-dialog-content>
    @if (data.inputData | isArray) {
      @for (widget of data.inputData; track widget) {
        <app-dynamic-component [inputs]="widget" />
      }
    } @else {
      <app-dynamic-component [inputs]="data.inputData.content" />
    }
  </mat-dialog-content>
  @if (!data.disableActions) {
    <div class="gap-3 px-4" mat-dialog-actions align="end">
      <button mat-button (click)="onNoClick()">{{ data.noLabel }}</button>
      <button mat-button color="primary" (click)="onYesClick()" cdkFocusInitial>
        {{ data.yesLabel }}
      </button>
    </div>
  }
</div>
